<template>
  <div class="potentialCustomers">
    <page-header :title="'实习岗位管理'"></page-header>
    <div class="search_area">
      <el-row>
        <el-form :form="queryForm" label-width="1rem">
          <el-col :span="6">
            <el-form-item label="实习方式">
              <el-select v-model="queryForm.internshipWay" clearable placeholder="请选择实习方式" style="width:100%">
                <el-option v-for="item in InternshipWayList" :label="item.described" :value="item.code" :key="item.code"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="发布日期">
              <el-date-picker
                style="width: 100%"
                v-model="queryForm.createTime"
                type="date"
                placeholder="选择日期"
                value-format="yyyy-MM-dd">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="计划标题">
              <el-input type="text" v-model="queryForm.projectHeading"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6" v-if="permission != '1'">
            <el-form-item label="指导教师">
              <el-select v-model="queryForm.teacherId" placeholder="请选择指导教师" style="width:100%">
                <el-option v-for="item in teacherList" :label="item.userName" :key="item.uuid" :value="item.uuid"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-form>
        <el-col :span="permission != '1' ? 24 : 6">
          <div class="btn_area">
            <el-button class="confrim" @click="btnClick">查询</el-button>
            <el-button class="cancle" @click="reset">重置</el-button>
            <el-button class="confrim" @click="add" v-if="permission!='2'">新增</el-button>
          </div>
        </el-col>
      </el-row>
    </div>
    <table-list :fields="fields" :list="list" :pagination="pagination" :total="total" @sizeChange="handleSizeChange" @currentChange="handleCurrentChange" @handle="onHandle"></table-list>
    <el-dialog :title="code == '1' ? '新增实习岗位': '编辑实习岗位'" :visible.sync="visible" @close="close">
      <el-row>
        <el-form :form="postForm" label-width="1.2rem">
          <el-col :span="11">
            <el-form-item label="岗位名称" required>
              <el-input type="text" v-model="postForm.postName" placeholder="请填写岗位名称"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label="实习计划" required>
              <el-select v-model="postForm.planId" clearable placeholder="请选择实习计划" style="width:100%">
                <el-option v-for="item in planList" :label="item.projectHeading" :value="item.uuid" :key="item.uuid"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label="报名截止时间" required>
               <el-date-picker
                style="width: 100%"
                v-model="postForm.applicationDeadline"
                type="date"
                placeholder="选择日期"
                value-format="yyyy-MM-dd">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label="岗位发布日期" required>
              <el-date-picker
                style="width: 100%"
                v-model="postForm.createTime"
                type="date"
                placeholder="选择日期"
                value-format="yyyy-MM-dd">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label="实习开始日期" required>
              <el-date-picker
                style="width: 100%"
                v-model="postForm.startDate"
                type="date"
                placeholder="选择日期"
                value-format="yyyy-MM-dd">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label="实习结束日期" required>
              <el-date-picker
                style="width: 100%"
                v-model="postForm.endDate"
                type="date"
                placeholder="选择日期"
                value-format="yyyy-MM-dd">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="22">
            <el-form-item label="岗位说明" required>
              <el-input type="textarea" v-model="postForm.postExplain"></el-input>
            </el-form-item>
          </el-col>
        </el-form>
      </el-row>
      <span slot="footer" class="dialog-footer">
        <el-button class="cancle" @click="visible = false">取 消</el-button>
        <el-button class="confrim" @click="confrim">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog title="岗位详情" :visible.sync="visible2">
      <el-descriptions class="margin-top" :column="2" border>

        <el-descriptions-item>
          <template slot="label">
            岗位名称
          </template>
          {{postForm.postName}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            实习计划
          </template>
          {{postForm.projectHeading}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            指导教师
          </template>
          {{postForm.teacherName}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            实习方式
          </template>
          {{postForm.internshipWayName}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            发布日期
          </template>
          {{postForm.createTime}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            报名截止时间
          </template>
          {{postForm.applicationDeadline}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            实习开始日期
          </template>
          {{postForm.startDate}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            实习结束日期
          </template>
          {{postForm.endDate}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            岗位说明
          </template>
          {{postForm.postExplain}}
        </el-descriptions-item>
      </el-descriptions>
      <span slot="footer" class="dialog-footer">
        <el-button class="confrim" @click="approved">申请岗位</el-button>
      </span>
    </el-dialog>
    <el-dialog title="报名信息列表" :visible.sync="visible3" width="60%">
      <div class="search_area">
        <el-row>
          <el-form :form="queryFormAudit">
            <el-col :span="8">
              <el-form-item label="学号"  label-width="0.4rem">
                <el-input type="text" v-model="queryFormAudit.account"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="审批状态"  label-width="0.8rem">
                <el-select v-model="queryFormAudit.auditStatus" clearable placeholder="请选择" style="width:100%">
                  <el-option v-for="item in status" :label="item.described" :value="item.code" :key="item.code"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-form>
          <el-col :span="8">
            <div class="btn_area">
              <el-button class="confrim" @click="queryAuditList">查询</el-button>
              <el-button class="cancle" @click="reset1">重置</el-button>
            </div>
          </el-col>
        </el-row>
      </div>
      <table-list :fields="fieldsAudit" :list="auditList" :pagination="paginationAudit" :total="totalAudit" @sizeChange="handleSizeChangeAudit" @currentChange="handleCurrentChangeAudit" @handle="onHandle2" :panduan="true"></table-list>
    </el-dialog>
  </div>
</template>
<script>
import tableList from '@/components/table.vue'
import pageHeader from '@/components/pageHeader.vue'
export default {
  name: 'potentialCustomers',
  components: {
    tableList,
    pageHeader
  },
  data() {
    return {
      postForm: {},
      queryForm: {
        internshipWay: '',
        projectHeading: '',
        createTime: '',
        teacherId: ''
      },
      list: [],
      fields: [
        {
          prop: 'rowNum',
          label: '序号',
          align: 'center'
        },
        {
          prop: 'postName',
          label: '岗位名称',
          align: 'center'
        },
        {
          prop: 'internshipWayName',
          label: '实习方式',
          align: 'center'
        },
        {
          prop: 'projectHeading',
          label: '实习计划',
          align: 'center'
        },
        {
          prop: 'teacherName',
          label: '指导教师',
          align: 'center'
        },
        {
          prop: 'applicationDeadline',
          label: '报名截止时间',
          align: 'center'
        },
        {
          prop: 'createTime',
          label: '发布日期',
          align: 'center'
        },
        {
          prop: 'endDate',
          label: '岗位结束日期',
          align: 'center'
        },
        {
          prop: 'oper',
          label: '操作',
          align: 'center',
          btns: []
        }
      ],
      pagination: {
        currentPage: 1,
        pageSize: 10
      },
      total: 0,
      code: '',
      visible: false,
      permission: '',
      teacherList: [],
      InternshipWayList: [],
      planList: [],
      visible2: false,
      postId: '',
      auditList: [],
      fieldsAudit: [
        {
          prop: 'rowNum',
          label: '序号',
          align: 'center'
        },
        {
          prop: 'account',
          label: '学号',
          align: 'center'
        },
        {
          prop: 'userName',
          label: '姓名',
          align: 'center'
        },
        {
          prop: 'phone',
          label: '联系方式',
          align: 'center'
        },
        {
          prop: 'className',
          label: '班级名称',
          align: 'center'
        },
        {
          prop: 'auditStatusName',
          label: '审核状态',
          align: 'center'
        },
        {
          prop: 'oper',
          label: '操作',
          align: 'center',
          btns: [
            {type: 'success',desc:'通过'},
            {type: 'delete',desc:'驳回'},
          ]
        }
      ],
      paginationAudit: {
        currentPage: 1,
        pageSize: 10
      },
      totalAudit: 0,
      visible3: false,
      queryFormAudit: {
        account: '',
        auditStatus: '',
      },
      status: []
    }
  },
  methods: {
    approved() {
      let url = this.$api.audit.create;
      let obj = {
        adminId: JSON.parse(sessionStorage.getItem('user')).uuid,
        postId: this.postForm.uuid
      }
      this.$post(url,this.reqData(obj)).then(res => {
        if (res.data.code === 200) {
          this.$message.success('申请已提交，请等待指导老师审批')
          this.visible2 = false;
        } else {
          this.$message.error(res.data.message)
        }
      })
    },
    close() {
      this.postForm = {};
    },
    confrim() {
      let url = this.code == '1' ? this.$api.post.create : this.$api.post.update
      console.log(this.postForm);
      this.$post(url,this.reqData(this.postForm)).then(res => {
        if (res.data.code === 200) {
          this.$message.success(res.data.message);
          this.visible = false;
          this.queryList()
        } else {
          this.$message.error(res.data.message);
        }
      })
    },
    onHandle2(data) {
      let {row,type} = data;
      console.log(data);
      let auditStatus = type == 'success' ? '02' : '03'
      let obj = {
        auditStatus,
        postId: this.postId,
        adminId: JSON.parse(sessionStorage.getItem('user')).uuid,
        auditId: row.auditId,
      }
      console.log(obj);
      this.$post(this.$api.audit.update,this.reqData(obj)).then(res => {
        if (res.data.code == 200) {
          this.$message.success(res.data.message);
          this.queryAuditList();
        } else {
          this.$message.error(res.data.message);
        }
      })
    },
    onHandle(data) {
      let {row,type} = data;
      console.log(data);
      this.postId = row.uuid
      this.code = '2';
      let url = this.$api.post.info;
      this.$post(url,this.reqData(row.uuid)).then(res => {
        if (res.data.code === 200) {
          console.log(res.data.data);
          let data = res.data.data;
          this.postForm = data;
        } else {
          this.$message.error(res.data.message)
        }
      })
      if (type == 'update') {
        this.visible = true;
      } else if (type == 'info'){
        this.visible2 = true;
      } else if (type == 'success') {
        console.log('1');
        this.visible3 = true;
        this.queryAuditList();
      }
    },
    reset() {
      this.queryForm = {
        name: '',
        area: '',
        type: ''
      }
    },
    reset1() {
      this.queryFormAudit = {
        account: '',
        auditStatus: '',
      }
    },
    add() {
      this.visible = true,
      this.code = '1';
      this.postForm.createTime = this.$time()
    },
    btnClick() {
      this.queryList();
    },
    queryList() {
      let url = this.$api.post.list;
      if (this.permission != '2') {
        this.queryForm.adminId = JSON.parse(sessionStorage.getItem('user')).uuid
      } else {
        this.queryForm.adminId = ""
      }
      this.$post(url,this.reqData(this.queryForm,this.pagination.currentPage,this.pagination.pageSize)).then(res => {
        if (res.data.code == 200) {
          let data = res.data.data
          this.list = data.list;
          this.list.forEach((item,index) => {
            item.rowNum = (this.pagination.currentPage - 1) * this.pagination.pageSize + index + 1
          })
          this.total = data.total;
        } else {
          this.$message.error(res.data.message)
        }
      })
    },
    queryAuditList() {
      this.queryFormAudit.postId = this.postId
      this.$post(this.$api.audit.list,this.reqData(this.queryFormAudit,this.paginationAudit.currentPage,this.paginationAudit.pageSize)).then(res => {
        if (res.data.code === 200) {
          console.log(res.data.data.list);
          this.auditList = res.data.data.list;
          this.auditList.forEach((item,index) => {
            item.rowNum = (this.pagination.currentPage - 1) * this.pagination.pageSize + index + 1
          })
          this.totalAudit = this.auditList.length;
        } else {
          this.$message.error(res.data.message)
        }
      })
    },
    handleSizeChange(val) {
      console.log(val);
      this.pagination.pageSize = val;
      this.queryList();
    },
    handleCurrentChange(val) {
      console.log(val);
      this.paginationAudit.currentPage = val;
      this.queryList();
    },
    handleSizeChangeAudit(val) {
      console.log(val);
      this.pagination.pageSize = val;
      this.queryAuditList();
    },
    handleCurrentChangeAudit(val) {
      console.log(val);
      this.paginationAudit.currentPage = val;
      this.queryAuditList();
    },
    queryTeacherList() {
      let url = this.$api.user.list;
      this.$post(url,this.reqData({},this.pagination.currentPage,this.pagination.pageSize)).then(res => {
        if (res.data.code == 200) {
          this.teacherList = res.data.data.filter(item => item.permission == '1');
          console.log(this.teacherList);
        } else {
          this.$message.error(res.data.message)
        }
      })
    },
    queryInternshipWay() {
      this.$post(this.$api.common.code,this.reqData('Internship_Way')).then(res => {
        if (res.data.code === 200) {
          this.InternshipWayList = res.data.data;
        }
      })
    },
    querystatus() {
      this.$post(this.$api.common.code,this.reqData('audit_status')).then(res => {
        if (res.data.code === 200) {
          this.status = res.data.data;
        }
      })
    },
    queryPlan() {
      let url = this.$api.plan.list;
      this.$post(url,this.reqData({adminId: JSON.parse(sessionStorage.getItem('user')).uuid},1,999)).then(res => {
        if (res.data.code == 200) {
          let data = res.data.data
          this.planList = data.list
          console.log(data);
        } else {
          this.$message.error(res.data.message)
        }
      })
    },
  },
  created() {
    this.permission = JSON.parse(sessionStorage.getItem('user')).permission
    if (this.permission == '2') {
      this.fields[this.fields.length - 1].btns.push({type: 'info',desc:'查看详情'})
    } else {
      this.fields[this.fields.length - 1].btns.push({type: 'update',desc:'编辑'})
      this.fields[this.fields.length - 1].btns.push({type: 'success',desc:'报名信息'})
    }

  },
  mounted() {
    this.queryPlan();
    this.querystatus();
    if (this.permission != '1') {
      this.queryTeacherList();
    }
    this.queryInternshipWay();
    this.queryList();
  }
}
</script>
<style scoped>
.potentialCustomers {
  background: #fff;
  overflow: hidden;
  padding-bottom: 0.15rem;
}
</style>